<!--
 * @Author: Wangtao
 * @Date: 2022-07-14 14:25:55
 * @LastEditors: Wangtao
 * @LastEditTime: 2022-09-23 10:31:36
-->
<template>
  <div>
    <div v-move="{ top: 0, left: 90 }" :class="{ 'phone-bar': true, 'mc-call-variable': true }">
      <!-- 通话状态条 -->
      <div class="peerStatus" :class="stateType" v-show="!disabledSwitch" drag>
        <el-dropdown @command="updateAgentStatus" trigger="hover" :disabled="disabledSwitch" style="min-width: 55px">
          <span class="status-name">
            <span class="name-ellipsis" :title="currentStatusName">{{ currentStatusName }} </span
            ><i class="MC_iconfont MC_icon-fangxiang-xia-mian-xiao" v-show="!disabledSwitch"></i>
            <span v-show="disabledSwitch && callingNumber">{{ ': ' + callingNumber }}</span>
          </span>
          <template #dropdown>
            <el-dropdown-menu :visible-arrow="false" class="cep-dropdown-menu phoneMenu">
              <el-dropdown-item
                v-for="item in agentStatusList"
                :key="item.number"
                :command="item.number"
                :class="{ 'hide-dropdown-item': item.name === currentStatusName }"
                ><div class="status-name-text mc-call-variable">
                  <div class="status" :class="{ idle: item.number === 0 }"></div>
                  {{ item.name }}
                </div></el-dropdown-item
              >
            </el-dropdown-menu>
          </template>
        </el-dropdown>
        <div class="login-type" v-show="!showConfig && !disabledSwitch">
          <div class="left"></div>
          <div class="middle pointer" @click.stop="goToSetting">
            {{ loginTypeMap[loginType] }} <i class="MC_iconfont MC_icon-fangxiang-you-mian-xiao"></i>
          </div>
          <div class="right"></div>
        </div>
        <div class="dialState-box">
          <phoneBarTimer ref="phoneBarPeerTimeRef" />
          <img class="icon" :src="kzicon" v-if="showDial && !hiddenOprate" @click="toggleDialState" />
          <i
            @click="toggleDialState"
            v-if="!showDial && !hiddenOprate"
            class="icon MC_iconfont MC_icon-a-hujiaojieting"
          ></i>
        </div>
      </div>
      <!-- 状态展示 -->
      <div class="call-status-box" v-show="disabledSwitch && !quickState">
        <div class="close" @click.stop="switchQuickState(true)">
          <i class="MC_iconfont MC_icon-kuozhan-shouqi-xian"></i>
        </div>
        <div class="status-box" :class="stateType">{{ currentStatusName }}</div>
        <div class="status-num-info">{{ customerInfo.displayNumber || '' }}</div>
      </div>
      <!-- 客户信息 -->
      <div class="customer-info" v-show="disabledSwitch && !quickState" drag>
        <div class="customer-item">
          <div class="customer-name">{{ customerInfo.name || customerInfo.number }}</div>
          <div class="time"><phoneBarTimer ref="phoneBarStatusTimeRef" /></div>
        </div>
        <div class="customer-item">
          <div class="region">{{ customerInfo.place || '未知地点' }}</div>
          <div class="tag" v-show="customerInfo.tag">{{ customerInfo.tag || '' }}</div>
        </div>
      </div>
      <!-- 快捷操作 -->
      <div class="quick-operation-box" v-show="quickState && disabledSwitch" drag>
        <div class="quick-state" :class="stateType">
          <span>{{ currentStatusName }}</span>
          <span>
            <phoneBarTimer ref="phoneBarQuickStatusTimeRef" />
            <i class="MC_iconfont MC_icon-kuozhan-zhankai-xian" @click="switchQuickState(false)"></i>
          </span>
        </div>
        <div class="quick-btn">
          <div class="btn-item hangup" v-if="isVisibleBtn('hangup') && showHangupBtn" @click.stop="hangup">
            <i class="MC_iconfont MC_icon-guaji1"></i>
          </div>
          <div class="btn-item accept" v-show="isVisibleBtn('answer')" @click.stop="accept">
            <i class="MC_iconfont MC_icon-hujiaohuojieting"></i>
          </div>
        </div>
      </div>
      <!-- 错误信息 -->
      <div v-if="errorObj.isError" class="error">
        <div class="opacity80">{{ errorObj.message }}</div>
        <el-link style="margin-top: 8px" :underline="false" type="primary" @click.stop="connect">刷新状态</el-link>
      </div>
      <!-- 接听挂断 -->
      <div class="oprate-wrap link-hangup" v-show="disabledSwitch && !quickState">
        <div
          class="btn error-back pointer hangup-btn"
          @click.stop="hangup"
          v-if="isVisibleBtn('hangup') && showHangupBtn"
        >
          <i class="MC_iconfont MC_icon-guaji right8 font12"></i>挂断
        </div>
        <div
          class="btn success-back pointer"
          @click.stop="accept"
          style="min-width: 200px"
          v-if="isVisibleBtn('answer')"
        >
          <i class="MC_iconfont MC_icon-hujiaohuojieting right8 font12"></i>接听
        </div>
      </div>
      <div v-show="!quickState">
        <!-- 操作按钮 -->
        <div class="oprate-wrap link-oprate" v-if="consulSelect || transferState">
          <div
            class="btn btn-middle pointer bak-btn"
            v-if="isVisibleBtn('concul') && consulSelect"
            @click.stop="setConsulState(false)"
          >
            <i class="MC_iconfont MC_icon-a-jiantou-zuo-line"></i><span class="text">返回</span>
          </div>
          <div
            class="btn btn-middle pointer bak-btn"
            v-if="isVisibleBtn('transfer') && transferState"
            @click.stop="setTransferState(false)"
          >
            <i class="MC_iconfont MC_icon-a-jiantou-zuo-line"></i><span class="text">返回</span>
          </div>
        </div>
        <div class="oprate-wrap link-oprate" v-else>
          <div class="btn btn-middle pointer" v-if="isVisibleBtn('hold')" @click.stop="holdOrUnHold('1')">
            <i class="MC_iconfont MC_icon-baochi"></i><span class="text">保持</span>
          </div>
          <div class="btn btn-middle pointer" v-if="isVisibleBtn('holdcancel')" @click.stop="holdOrUnHold('2')">
            <i class="MC_iconfont MC_icon-quxiaobaochi"></i><span class="text">取消保持</span>
          </div>
          <div class="btn btn-middle pointer" v-if="isVisibleBtn('mute')" @click.stop="muteOrUnMute('1')">
            <i class="MC_iconfont MC_icon-jingyin"></i><span class="text">静音</span>
          </div>
          <div class="btn btn-middle pointer" v-if="isVisibleBtn('mutecancel')" @click.stop="muteOrUnMute('2')">
            <i class="MC_iconfont MC_icon-quxiaojingyin"></i><span class="text">取消静音</span>
          </div>
          <div class="btn btn-middle pointer" v-if="isVisibleBtn('takeback')" @click.stop="resumeConsult">
            <i class="MC_iconfont MC_icon-jiehui"></i><span class="text">接回</span>
          </div>
          <div
            class="btn btn-middle pointer"
            v-if="isVisibleBtn('concul') && !consulSelect"
            @click.stop="setConsulState(true)"
          >
            <i class="MC_iconfont MC_icon-zixun"></i><span class="text">咨询</span>
          </div>
          <div class="btn btn-middle pointer" v-if="isVisibleBtn('cancelconcul')" @click.stop="cancelConsult">
            <i class="MC_iconfont MC_icon-quxiaozixun"></i><span class="text">取消咨询</span>
          </div>
          <div class="btn btn-middle pointer" v-if="isVisibleBtn('endconsul')" @click.stop="stopConsult">
            <i class="MC_iconfont MC_icon-quxiaojingyin"></i><span class="text">结束咨询</span>
          </div>
          <div class="btn btn-middle pointer" v-if="isVisibleBtn('concultransfer')" @click.stop="consultTransfer">
            <i class="MC_iconfont MC_icon-zixunzhuanyi"></i><span class="text">咨询转移</span>
          </div>
          <div class="btn btn-middle pointer" v-if="isVisibleBtn('threepartycall')" @click.stop="threeWayCall">
            <i class="MC_iconfont MC_icon-sanfangtonghua"></i><span class="text">三方通话</span>
          </div>
          <div
            class="btn btn-middle pointer"
            v-if="isVisibleBtn('transfer') && !transferState"
            @click.stop="setTransferState(true)"
          >
            <i class="MC_iconfont MC_icon-zhuanjie"></i><span class="text">转接</span>
          </div>
          <div class="btn btn-middle pointer" v-if="isVisibleBtn('satisfaction')" @click.stop="satisfaction">
            <i class="MC_iconfont MC_icon-manyidu"></i><span class="text">满意度</span>
          </div>
          <div
            class="btn btn-middle pointer"
            @click.stop="setWebrtcKeyState(false)"
            v-if="isVisibleBtn('key') && webrtcKeyState"
          >
            <i class="MC_iconfont MC_icon-jianpan"></i><span class="text">键盘</span>
          </div>
          <div
            class="btn btn-middle pointer"
            @click.stop="setWebrtcKeyState(true)"
            v-if="isVisibleBtn('key') && !webrtcKeyState"
          >
            <i class="MC_iconfont MC_icon-quxiaojianpan"></i><span class="text">取消键盘</span>
          </div>
        </div>
      </div>
      <!-- 转接或咨询操作 -->
      <!-- module: transfer/consult 不同的操作传递不同的值 -->
      <transfer-consult
        style="margin-bottom: 16px"
        v-if="(isVisibleBtn('transfer') && transferState) || (isVisibleBtn('concul') && consulSelect)"
        :module="actionModule"
      ></transfer-consult>
      <!-- 通话历史 -->
      <!-- <div class="history">
			<i></i>
		</div> -->
      <!-- 通话按钮 -->
      <!-- 最近通话 -->
      <recent-calls @switch="switchKey(false)" v-if="callRcentState && showDial && !hiddenOprate"></recent-calls>
      <div
        class="dial"
        v-if="(showDial && !hiddenOprate && !callRcentState) || (isVisibleBtn('key') && !webrtcKeyState)"
      >
        <div class="dial-input">
          <el-input
            class="input"
            type
            :placeholder="showKeyboardPlaceholder ? defaultKeyboardPlaceholder : ''"
            ref="input"
            :modelValue="dialoutNumber"
            @update:modelValue="inputChange"
            @keyup.enter="keyDowndialout"
            @focus="showKeyboardPlaceholder = false"
            @blur="showKeyboardPlaceholder = true"
          />
          <svg class="num back pointer" v-show="isVisibleBtn('key')" @click.stop="deleteNum">
            <use xlink:href="#MC_icon-jianpanshanchu"></use>
          </svg>
        </div>
        <div class="dial-box">
          <span
            v-for="(key, index) in keyList"
            :key="index"
            class="num pointer light-back"
            @click.stop="sendDTMF(key)"
            >{{ key }}</span
          >
          <span class="num pointer light-back star" @click.stop="sendDTMF('*')">*</span>
          <span class="num pointer light-back" @click.stop="sendDTMF('0')">0</span>
          <span class="num pointer light-back" @click.stop="sendDTMF('#')">#</span>
          <i
            class="num MC_iconfont MC_icon-wenbenqingdan-xian"
            v-show="!isVisibleBtn('key')"
            @click="switchKey(true)"
          ></i>
          <i
            class="num MC_iconfont MC_icon-hujiaohuojieting success-back pointer"
            v-show="isVisibleBtn('dialout') && !isVisibleBtn('key')"
            @click.stop="dialout(dialoutNumber)"
          ></i>
          <svg class="num back pointer" v-show="!isVisibleBtn('key')" @click.stop="deleteNum">
            <use xlink:href="#MC_icon-jianpanshanchu"></use>
          </svg>
        </div>
      </div>
      <!-- 接听方式设置 -->
      <div class="setting" v-if="showConfig && !hiddenOprate">
        <div class="label">通话设置</div>
        <formItem class="width-full type">
          接听方式
          <template v-slot:field>
            <el-select
              v-model="callConfig.loginType"
              :popper-append-to-body="true"
              class="width-full"
              @change="changeType"
            >
              <el-option
                v-for="one in loginTypeList"
                :key="one.value"
                :value="one.value"
                :label="one.label"
              ></el-option>
            </el-select>
          </template>
        </formItem>
        <formItem v-if="callConfig.loginType === 'PSTN'" class="width-full type">
          手机号码
          <template v-slot:field>
            <el-input
              style="min-width: 200px"
              placeholder="请输入"
              v-model="callConfig.mobile"
              clearable
              @change="validFun($event)"
            ></el-input>
          </template>
        </formItem>
        <el-checkbox v-model="callConfig.autoAnswer" v-if="callConfig.loginType === 'WEBRTC'">自动接听</el-checkbox>
        <div v-if="callConfig.autoAnswer && callConfig.loginType === 'WEBRTC'">
          振铃
          <input-suffix suffix="秒">
            <el-input-number
              style="width: 120px"
              :controls="false"
              v-int
              v-model="callConfig.autoAnswerTime"
              :min="0"
              controls-position="right"
              size="middle"
            />
          </input-suffix>
          后接听
        </div>
        <formItem class="width-full type" v-if="callConfig.loginType === 'SIP'">
          SIP号
          <template v-slot:field>
            <el-select v-model="callConfig.sipNumber" clearable class="width-full" :popper-append-to-body="false">
              <el-option v-for="one in sipNumberList" :key="one.id" :value="one.number" :label="one.number">
              </el-option>
            </el-select>
          </template>
        </formItem>
        <!-- <div class="width-full type">
          离线接听：<el-checkbox v-model="AnswerOffline" @change="toAnswerOffline">开启</el-checkbox>
          <el-tooltip :show-after="500" class="item" effect="dark" placement="top" popper-class="offlineTip">
            <template v-slot:content> 离线方式默认为当前登陆方式；登陆方式为软电话时、离线方式默认为手机。 </template>
            <i class="el-icon-question" style="color: rgba(0, 0, 0, 0.3); margin-left: 5px"></i>
          </el-tooltip>
        </div> -->
        <div class="footer">
          <el-button @click.stop="setBack" type="text">取消</el-button>
          <!-- 确 定 -->
          <el-button type="primary" @click.stop="updateLoginType">确定</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, toRefs, ref, computed, onMounted, watch } from 'vue'

import phoneBarTimer from './phoneBarTimes.vue'
import formItem from './formItem.vue'
import transferConsult from './transfer-consult.vue'
import move from './directive/move'
import { userModule } from '@/common/store/modules/user'
import { callStateModule } from '@/common/store/modules/call-state'
import { updateCallConfig, getSipNum, changeLoginType, geSdkIvrList } from '@app/base/apis/call'
import { deepClone } from '@/common/utils/common'
import { ElMessage } from 'element-plus'
import { isNumber } from '@/common/utils/validate'
import { getPersonInfo } from '@app/base/apis/person-info'
import recentCalls from './recent-calls.vue'
import kzicon from '@/common/assets/kz.svg'
import { getCustomerByMobile } from '@app/base/apis/call'
import { fetchData } from '@app/call-center/apis/client-setting'

import { getAgentConfig } from '@app/call-center/apis/client-setting'
import inputSuffix from '@/common/components/input-suffix.vue'
import { int } from '@/app/base/directives/input-int'
import { newDate } from '@/common/utils/common'
export default defineComponent({
  name: 'telephoneStrip',
  components: {
    phoneBarTimer,
    formItem,
    transferConsult,
    recentCalls,
    inputSuffix
  },
  directives: {
    move,
    int
  },
  // ----------------生命周期-----------------------
  created() {
    // const scriptLabel = document.createElement('script')
    // scriptLabel.type = 'text/javascript'
    // scriptLabel.src = 'https://v7-fs-call.7moor.com/v7sdk/V7Softphone-2.0.1.min.js'
    // document.head.appendChild(scriptLabel)
    // scriptLabel.onload = () => {
    //   try {
    //     this.initPhone()
    //     let wsUrl = ''
    //     this.pushServe.some((item: any) => {
    //       if (item.id === 'KF') {
    //         wsUrl = item.url
    //         return true
    //       }
    //     })
    //     console.log(wsUrl, 'ooooooooooooooo')
    //     this.CALLSTATE.initConnect()
    //   } catch (error: any) {
    //     console.log(error, '加载sdk文件失败')
    //   }
    // }
    this.initPhone()
  },
  setup() {
    // ----------------传入属性-----------------------
    const phoneBarPeerTimeRef: any = ref(null)
    const phoneBarStatusTimeRef: any = ref(null)
    const phoneBarQuickStatusTimeRef: any = ref(null)
    const quickBar = ref(null)
    // ----------------内部属性-----------------------
    const USERMODULE = userModule()

    const CALLSTATE = callStateModule()

    const state = reactive({
      actionModule: 'transfer',
      errorObj: {
        isError: false,
        type: '',
        message: ''
      },
      // 状态类型，根据状态类型显示颜色 free/busy/calling/called/disconnect
      stateType: 'free',
      currentCallType: '', // 外呼还是呼入
      // stateType: 'called',
      // 展示通话配置
      showConfig: false,
      callConfig: {
        autoAnswer: false,
        sipNumber: '',
        autoAnswerTime: '0',
        mobile: '',
        loginType: ''
      },
      accountConfig: {
        forbidDialInHangup: false, // 禁止呼入挂机
        forbidDialOutHangup: false, // 禁止外呼挂机
        ringCard: false // 来电振铃卡片是否展开
      },
      defaultConfig: {},
      AnswerOffline: false,
      sipNumberList: [],
      dialoutNumber: '',
      // 控制操作按钮
      renderMap: {
        PSTN_INVALID: ['dialout'],
        PSTN_INCOMING_CALLING: ['hangup'],
        PSTN_DIALOUT_CALLING: ['hangup'],
        PSTN_INCOMING_RING: ['hangup', 'animation'],
        PSTN_DIALOUT_RING: ['hangup'],
        PSTN_TRANSFER_RING: ['hangup', 'animation'],
        PSTN_INCOMING_LINK: ['hangup', 'hold', 'mute', 'transfer', 'concul', 'satisfaction'],
        PSTN_DIALOUT_LINK: ['hangup', 'hold', 'mute', 'transfer', 'concul', 'satisfaction'],
        PSTN_TRANSFER_LINK: ['hangup', 'hold', 'mute', 'transfer', 'concul', 'satisfaction'],
        PSTN_CONSULTTRANSFER_LINK: ['hangup', 'hold', 'mute', 'transfer', 'concul', 'satisfaction'],
        PSTN_INCOMING_MUTE: ['hangup', 'mutecancel'],
        PSTN_DIALOUT_MUTE: ['hangup', 'mutecancel'],
        PSTN_CONSULTTRANSFER_MUTE: ['hangup', 'mutecancel'],
        PSTN_INCOMING_HOLD: ['hangup', 'holdcancel'],
        PSTN_DIALOUT_HOLD: ['hangup', 'holdcancel'],
        PSTN_CONSULTTRANSFER_HOLD: ['hangup', 'holdcancel'],
        PSTN_INCOMING_ARRANGE: ['dialout'],
        PSTN_DIALOUT_ARRANGE: ['dialout'],
        PSTN_CONSULTTRANSFER_ARRANGE: ['dialout'],
        PSTN_BUSY: ['dialout'],
        PSTN_DIALOUT_BUSY: ['dialout'],
        PSTN_INCOMING_BUSY: ['dialout'],
        PSTN_DISCONNECTED: ['showquick'],
        WAITCONSUL: ['hangup', 'cancelconcul'],
        CONSULCANCEL: ['hangup', 'concul', 'takeback'],
        CONSULPICKUP: ['hangup', 'endconsul', 'threepartycall', 'concultransfer'],
        CONSULING: ['hangup'],
        THREECALL: ['hangup'],
        LISTEN: ['hangup'],
        WHISPER: ['hangup'],
        PSTN_CONSULT_RING: ['hangup'],
        //
        SIP_INVALID: ['dialout'],
        SIP_INCOMING_CALLING: ['hangup'],
        SIP_DIALOUT_CALLING: ['hangup'],
        SIP_INCOMING_RING: ['hangup'],
        SIP_DIALOUT_RING: ['hangup'],
        SIP_TRANSFER_RING: ['hangup'],
        SIP_INCOMING_LINK: ['hangup', 'hold', 'mute', 'transfer', 'concul', 'satisfaction'],
        SIP_DIALOUT_LINK: ['hangup', 'hold', 'mute', 'transfer', 'concul', 'satisfaction'],
        SIP_TRANSFER_LINK: ['hangup', 'hold', 'mute', 'transfer', 'concul', 'satisfaction'],
        SIP_CONSULTTRANSFER_LINK: ['hangup', 'hold', 'mute', 'transfer', 'concul', 'satisfaction'],
        SIP_INCOMING_MUTE: ['hangup', 'mutecancel'],
        SIP_DIALOUT_MUTE: ['hangup', 'mutecancel'],
        SIP_CONSULTTRANSFER_MUTE: ['hangup', 'mutecancel'],
        SIP_INCOMING_HOLD: ['hangup', 'holdcancel'],
        SIP_DIALOUT_HOLD: ['hangup', 'holdcancel'],
        SIP_CONSULTTRANSFER_HOLD: ['hangup', 'holdcancel'],
        SIP_INCOMING_ARRANGE: ['dialout'],
        SIP_DIALOUT_ARRANGE: ['dialout'],
        SIP_CONSULTTRANSFER_ARRANGE: ['dialout'],
        SIP_BUSY: ['dialout'],
        SIP_DIALOUT_BUSY: ['dialout'],
        SIP_INCOMING_BUSY: ['dialout'],
        SIP_DISCONNECTED: ['showquick'],
        SIP_CONSULT_RING: ['hangup'],

        //
        WEBRTC_INVALID: ['dialout', 'disconnect'],
        WEBRTC_INCOMING_CALLING: ['hangup'],
        WEBRTC_DIALOUT_CALLING: ['hangup'],
        WEBRTC_INCOMING_RING: ['hangup', 'answer'],
        WEBRTC_DIALOUT_RING: ['hangup'],
        WEBRTC_TRANSFER_RING: ['hangup', 'answer', 'animation'],
        WEBRTC_INCOMING_LINK: ['hangup', 'hold', 'mute', 'key', 'transfer', 'concul', 'satisfaction'],
        WEBRTC_DIALOUT_LINK: ['hangup', 'hold', 'mute', 'key', 'transfer', 'concul', 'satisfaction'],
        WEBRTC_TRANSFER_LINK: ['hangup', 'hold', 'mute', 'transfer', 'concul', 'satisfaction'],
        WEBRTC_CONSULTTRANSFER_LINK: ['hangup', 'hold', 'mute', 'key', 'transfer', 'concul', 'satisfaction'],
        WEBRTC_INCOMING_MUTE: ['hangup', 'mutecancel'],
        WEBRTC_DIALOUT_MUTE: ['hangup', 'mutecancel'],
        WEBRTC_CONSULTTRANSFER_MUTE: ['hangup', 'mutecancel'],
        WEBRTC_INCOMING_HOLD: ['hangup', 'holdcancel'],
        WEBRTC_DIALOUT_HOLD: ['hangup', 'holdcancel'],
        WEBRTC_CONSULTTRANSFER_HOLD: ['hangup', 'holdcancel'],
        WEBRTC_INCOMING_ARRANGE: ['dialout'],
        WEBRTC_DIALOUT_ARRANGE: ['dialout'],
        WEBRTC_CONSULTTRANSFER_ARRANGE: ['dialout'],
        WEBRTC_DISCONNECTED: ['connect', 'showquick'],
        WEBRTC_BUSY: ['dialout'],
        WEBRTC_DIALOUT_BUSY: ['dialout'],
        WEBRTC_INCOMING_BUSY: ['dialout'],
        WEBRTC_CONSULT_RING: ['hangup', 'answer']
      },
      // currentStatus: 'PSTN_INVALID',
      currentStatus: 'PSTN_INVALID',
      currentStatusName: '空闲',
      // 外呼或呼入号码
      callingNumber: '',
      keyList: ['1', '2', '3', '4', '5', '6', '7', '8', '9'],
      loginType: '',
      loginTypeMap: {
        PSTN: '手机模式',
        SIP: 'SIP话机',
        WEBRTC: '软电话'
      },
      loginTypeList: [
        {
          value: 'PSTN',
          label: '手机模式'
        },
        {
          value: 'SIP',
          label: 'SIP话机'
        },
        {
          value: 'WEBRTC',
          label: '软电话'
        }
      ],
      ivrList: [],
      agentStatusList: [],
      agentStatusNumber: '',
      isTransterBtn: true,
      isOpenpanel: false,
      quickToWhole: false,
      // 前端控制交互状态
      // 默认键盘展示
      showDial: true,
      // 转接控制
      transferState: false,
      // 咨询控制
      consulSelect: false,
      // 软电话键盘控制
      webrtcKeyState: false,
      // 切换通话记录
      callRcentState: false,
      // 快捷操作状态
      quickState: false,
      // 客户信息
      customerInfo: {
        number: '',
        name: '',
        place: '',
        tag: '',
        displayNumber: '', // 服务号或者外显号
        active: false // 客户信息展示是否被激
      },
      switchQuickState(currentState: boolean) {
        state.quickState = currentState
      },
      switchKey(keyState: any) {
        state.callRcentState = keyState
      },
      setTransferState(transCancelState: any) {
        // console.log(state, 'ooo')
        if (transCancelState) {
          state.actionModule = 'transfer'
        }
        state.transferState = transCancelState
      },
      setConsulState(consulCancelState: any) {
        if (consulCancelState) {
          state.actionModule = 'consult'
        }
        state.consulSelect = consulCancelState
      },
      setWebrtcKeyState(cancelWebrctKey: any) {
        state.webrtcKeyState = cancelWebrctKey
      },
      toAnswerOffline(v: string) {
        const toAnswerOffline = v ? '1' : '0'
        window.V7SoftphoneVm.agentApi.setAnswerOffline({
          toAnswerOffline: toAnswerOffline,
          success: () => {
            console.log({
              message: '设置成功',
              type: 'success'
            })
          },
          fail: () => {
            console.log({
              message: '设置失败',
              type: 'error'
            })
          }
        })
      },
      inputChange(v: string) {
        if (/^[0-9*#]*$/.test(v)) {
          state.dialoutNumber = v
        }
      },
      // initPhone() {
      //   window.V7SoftphoneVm = new V7Softphone({
      //     accountId: 'testcg',
      //     agentNumber: '1000',
      //     password: '123456Aa',
      //     loginType: 'WEBRTC',
      //     error(error: any) {
      //       if (error.code === '2005') {
      //         state.errorObj.isError = true
      //         state.errorObj.message = '当前License数量不足请联系管理员'
      //       } else if (error.message) {
      //         console.log({
      //           message: error.message,
      //           type: 'error'
      //         })
      //       }
      //       // console.log(error)
      //     },
      //     success(data: any) {
      //       state.errorObj.isError = false
      //       state.initUserConfig(data)
      //       state.getAgentPhoneBarList()
      //       state.getAvailableSipNumberList()
      //     }
      //   })
      //   window.V7SoftphoneVm.attachEvent({
      //     success(msg: any) {
      //       phoneBarTimeRef.value.timerTypeChange({ timeType: 'timing', statusTime: 0 })
      //     },
      //     error(error: any) {
      //       if (error.message) {
      //         console.log({
      //           message: error.message,
      //           type: 'error'
      //         })
      //       }
      //       console.error(error)
      //     },
      //     message: (res: any) => {
      //       const event = res.event
      //       if (res.type === 'KICK_OFF') {
      //         state.errorObj.isError = true
      //         state.errorObj.message = '您的账号在其他网页登录'
      //         return
      //       } else if (res.type === 'callStatus') {
      //         state.currentStatusName = event.statusName
      //         const timeType = event.statusNumber === '5' ? 'countDown' : 'timing'
      //         if (event.statusTime) {
      //           state.timeRecording(timeType, event.statusTime)
      //         } else {
      //           state.timeRecording(timeType)
      //         }
      //       }
      //       state.currentStatus = state.getCurrentStatus(event.statusNumber, event.callType)
      //       if (state.stateType === 'free' || state.stateType === 'busy') {
      //         state.callingNumber = ''
      //       } else {
      //         state.callingNumber = event.number || ''
      //       }
      //       // 重置转接按钮
      //       if (event.callEvent === 'hangup') {
      //         state.isTransterBtn = true
      //       }
      //     }
      //   })
      // },
      initPhone() {
        CALLSTATE.initConnect({
          message(res: any) {
            const event = res.body
            if (res.type === 'KICK_OFF') {
              state.errorObj.isError = true
              state.errorObj.message = '您的账号在其他网页登录'
              window.location.href = '/login'
              return
            } else if (res.type === 'callStatus') {
              state.currentStatusName = event.statusName
              const timeType = event.statusNumber === '5' ? 'countDown' : 'timing'
              if (event.statusTime) {
                state.timeRecording(timeType, event.statusTime)
              } else {
                state.timeRecording(timeType)
              }
            }
            // 有新事件来的时候，把转接和咨询的返回状态重置
            state.consulSelect = false
            state.transferState = false
            console.log('输出event', event)
            state.currentStatus = state.getCurrentStatus(event.statusNumber, event.callType, event.callEvent)
            state.setCustomerInfo(event)
            if (state.stateType === 'free' || state.stateType === 'busy') {
              state.callingNumber = ''
            } else {
              state.callingNumber = event.number || ''
            }
            // 重置转接按钮
            if (event.callEvent === 'hangup') {
              state.isTransterBtn = true
            }
          },
          success(event: any) {
            state.loginType = event.loginType
            phoneBarPeerTimeRef.value.timerTypeChange({ timeType: 'timing', statusTime: 0 })
            phoneBarStatusTimeRef.value.timerTypeChange({ timeType: 'timing', statusTime: 0 })
            phoneBarQuickStatusTimeRef.value.timerTypeChange({ timeType: 'timing', statusTime: 0 })
            state.getAgentPhoneBarList()
            // 获取电话条配置
            getConfig()
          }
        })
      },
      setCustomerInfo(event: any) {
        const callType = event.callType || ''
        const callEvent = event.callEvent || ''
        if (state.stateType === 'calling' || state.stateType === 'ring' || state.stateType === 'called') {
          // 激活中才会赋值客户信息
          if (callType === 'dialout') {
            state.customerInfo.displayNumber = event.displayNumber ? '外显号：' + event.displayNumber : ''
          } else {
            state.customerInfo.displayNumber = event.trunkNumber ? '服务号：' + event.trunkNumber : ''
          }
          if (event.number) {
            state.customerInfo.number = event.number
            if (!state.customerInfo.name) {
              if (!state.customerInfo.active) {
                state.customerInfo.active = true
                state.getCustomerName(event.number)
              }
              console.log('未设置名称')
            }
          }
          let place = ''
          if (event.customerCountryCode === '86') {
            if (event.customerProvince) {
              place = event.customerProvince + '-' + event.customerCity
            }
          } else {
            if (event.customerCountry) {
              place = event.customerCountry
            }
          }
          state.customerInfo.place = place
        }
        if (!['calling', 'called', 'ring'].includes(state.stateType)) {
          state.customerInfo = {
            number: '',
            name: '',
            place: '',
            tag: '',
            displayNumber: '', // 服务号或者外显号
            active: false // 客户信息展示是否被激活
          }
        }
        console.log(event, '')
      },
      async getCustomerName(number: any) {
        const res = await getCustomerByMobile({ mobile: number, type: '1' })
        if (res.success) {
          const customerList = res.data.list || []
          if (state.customerInfo.active) {
            if (customerList.length > 1) {
              state.customerInfo.name = '对应多个客户'
            } else if (customerList.length === 1) {
              state.customerInfo.name = customerList[0].customerName || '未设置名称'
            } else {
              state.customerInfo.name = '未知客户'
            }
          }
        }
      },
      initPhoneOpenState() {
        const phoneUnfoldState = localStorage.getItem('phoneUnfoldState')
        if (phoneUnfoldState === null || phoneUnfoldState === 'true') {
          state.setUnfoldState(true)
        } else {
          state.setUnfoldState(false)
        }
      },
      setBack() {
        state.showDial = true
        state.showConfig = false
      },
      goToSetting() {
        state.showDial = false
        state.showConfig = true
        state.callConfig = deepClone(state.defaultConfig) // 初始化
      },
      deleteNum() {
        if (state.dialoutNumber) {
          const length = state.dialoutNumber.length
          state.dialoutNumber = state.dialoutNumber.substring(0, length - 1)
        }
      },
      dialout(dialoutNumber: string) {
        if (!dialoutNumber) {
          ElMessage.error({
            message: '请填写外呼号码',
            type: 'error'
          })
          return
        }
        // if (window.V7SoftphoneVm) {
        //   window.V7SoftphoneVm.callApi.dialout({
        //     calleeNumber: dialoutNumber,
        //     success(res: any) {
        //       state.dialoutNumber = ''
        //       // console.log({
        //       // 	message: '外呼成功',
        //       // 	type: 'success',
        //       // 	duration: 5 * 1000
        //       // })
        //     },
        //     fail(error: any) {
        //       console.log({
        //         message: error.message,
        //         type: 'error'
        //       })
        //     }
        //   })
        // }
        CALLSTATE.dialOut(dialoutNumber)
      },
      hangup() {
        // if (window.V7SoftphoneVm) {
        //   window.V7SoftphoneVm.callApi.hangup({
        //     fail(error: any) {
        //       console.error(error, 'error')
        //     }
        //   })
        // }
        CALLSTATE.hangup()
      },
      holdOrUnHold(type: string) {
        // if (window.V7SoftphoneVm) {
        //   window.V7SoftphoneVm.callApi.holdOrUnHold({
        //     type,
        //     fail(error: any) {
        //       console.error(error, 'error')
        //     }
        //   })
        // }
        CALLSTATE.holdOrUnHold(type)
      },
      muteOrUnMute(type: string) {
        // if (window.V7SoftphoneVm) {
        //   window.V7SoftphoneVm.callApi.muteOrUnMute({
        //     type,
        //     fail(error: any) {
        //       console.error(error, 'error')
        //     }
        //   })
        // }
        const direction = type === '1' ? 'in' : 'all'
        CALLSTATE.muteOrUnMute({ type, direction })
      },
      resumeConsult() {
        CALLSTATE.resumeConsult()
      },
      consultTransfer() {
        CALLSTATE.consultTransfer()
      },
      threeWayCall() {
        CALLSTATE.threeWayCall()
      },
      stopConsult() {
        CALLSTATE.stopConsult()
      },
      cancelConsult() {
        CALLSTATE.cancelConsult()
      },
      satisfaction() {
        CALLSTATE.satisfaction('SATISFACTION')
      },
      transOrUntrans() {
        state.isTransterBtn = !state.isTransterBtn
      },
      accept() {
        CALLSTATE.accept()
      },
      sendDTMF(key: string) {
        state.dialoutNumber += key
        if (state.isVisibleBtn('key')) {
          CALLSTATE.sendDTMF(key)
        }
      },
      connect() {
        window.V7SoftphoneVm = null
        state.initPhone()
      },
      disconnect() {
        CALLSTATE.disconnect()
      },
      keyDowndialout(event: any) {
        if (event.keyCode === 13) {
          state.dialout(state.dialoutNumber)
        }
      },
      // updateLoginType() {
      // const { loginType, sipNumber } = state.callConfig
      // const data: any = { loginType }
      // if (loginType === 'SIP' && sipNumber) {
      //   data.sipNumber = sipNumber
      // }
      // window.V7SoftphoneVm.agentApi.updateLoginType({
      //   ...data,
      //   success: () => {
      //     state.loginType = loginType
      //     localStorage.setItem('phoneLoginType', loginType)
      //     state.setBack()
      //     state.updateCurrentStatus()
      //     console.log({
      //       message: '切换成功',
      //       type: 'success'
      //     })
      //   },
      //   fail: () => {
      //     console.log({
      //       message: '切换失败',
      //       type: 'error'
      //     })
      //   }
      // })
      // },
      getAgentPhoneBarList() {
        // window.V7SoftphoneVm.agentApi.getAgentPhoneBarList({
        //   success: (res: any) => {
        //     state.agentStatusList = res.data
        //   }
        // })
        CALLSTATE.getAgentPhoneBarList().then((resp: any) => {
          state.agentStatusList = resp || []
        })
      },
      updateAgentStatus(statusNumber: string) {
        // window.V7SoftphoneVm.agentApi.updateAgentStatus({
        //   statusNumber,
        //   success(res: any) {
        //     // console.log(res);
        //   }
        // })
        CALLSTATE.setAgentStatus({ statusNumber })
      },
      getAvailableSipNumberList() {
        window.V7SoftphoneVm.agentApi.getAvailableSipNumberList({
          success: (res: any) => {
            if (res.success) {
              state.sipNumberList = res.data
            }
            // SIP话机模式需要绑定的number参数可以从这里获取
          }
        })
      },
      initUserConfig(userData: any) {
        state.AnswerOffline = userData.toAnswerOffline && userData.toAnswerOffline === '1' ? true : false
      },
      isVisibleBtn(type: string) {
        if (state.currentStatus) {
          const mapData = (state as any).renderMap[state.currentStatus] || ''
          return mapData && mapData.indexOf(type) > -1
        }
      },
      getCurrentStatus(statusNumber: string, type: string, callEvent: string) {
        if (type) {
          state.currentCallType = type
        }
        const callType = type ? '_' + type.toUpperCase() : ''
        let statusName = ''
        state.quickToWhole = false
        switch (statusNumber) {
          case '0':
            statusName = state.loginType + '_INVALID'
            state.stateType = 'free'
            break
          case '1':
            statusName = state.loginType + callType + '_BUSY'
            state.stateType = 'busy'
            break
          case '2':
            statusName = state.loginType + callType + '_CALLING'
            state.stateType = 'calling'
            break
          case '3':
            if (callEvent === 'consult') {
              // 转接振铃
              statusName = state.loginType + '_CONSULT_RING'
            } else {
              // 普通振铃
              statusName = state.loginType + callType + '_RING'
            }
            state.stateType = 'ring'
            break
          case '4':
            // 通话中
            if (callEvent === 'consult') {
              // 点击咨询，等待被咨询方接起时的状态（咨询中）
              // 等待咨询 取消咨询
              statusName = 'WAITCONSUL'
            } else if (callEvent === 'callBack') {
              // 咨询中点击取消咨询
              // 取消咨询 咨询-接回
              statusName = 'CONSULCANCEL'
            } else {
              statusName = state.loginType + callType + '_LINK'
              // 挂断, 保持， 静音, 满意度，转接，咨询
            }
            state.stateType = 'called'
            break
          case '5': // 忙碌
            statusName = state.loginType + callType + '_ARRANGE'
            state.stateType = 'busy'
            break
          case '6': // 保持
            statusName = state.loginType + callType + '_HOLD'
            // 挂断， 取消保持
            state.stateType = 'called'
            break
          case '7': // 静音
            statusName = state.loginType + callType + '_MUTE'
            // 挂断, 取消静音
            state.stateType = 'called'
            break
          case '8': // 未连接
            statusName = state.loginType + callType + '_DISCONNECTED'
            state.stateType = 'disconnect'
            break
          case '9': // 失效
            statusName = state.loginType + callType + '_DISCONNECTED'
            state.stateType = 'disconnect'
            break
          case '10':
            // 咨询成功
            if (callEvent === 'callback') {
              // 点击结束咨询
              statusName = 'CONSULCANCEL'
              // 挂断，接回，咨询(可继续咨询其他人)
            } else {
              // 咨询接起 取消咨询 三方通话 咨询转移
              statusName = 'CONSULPICKUP'
            }
            state.stateType = 'called'
            break
          case '11': // 三方
            statusName = 'THREECALL'
            state.stateType = 'called'
            break
          case '12': // 咨询接起后，被咨询方的状态
            statusName = 'CONSULING'
            state.stateType = 'called'
            break
          case '13': // 被三方
            statusName = 'THREECALL'
            state.stateType = 'called'
            break
          case '14': // 监听
            statusName = 'LISTEN'
            state.stateType = 'called'
            break
          case '15': // 耳语
            statusName = 'WHISPER'
            state.stateType = 'called'
            break
          default:
            statusName = state.loginType + callType + '_BUSY'
            state.stateType = 'busy'
            break
        }
        return statusName
      },
      updateCurrentStatus() {
        const statusList = state.currentStatus.split('_')
        if (statusList[0] !== state.loginType) {
          statusList[0] = state.loginType
          state.currentStatus = statusList.join('_')
        }
      },
      /**
       * 控制计时器
       * @param {string} type timing 正计时 or countDown 倒计时
       * @param {?string} timestamp 时间戳 从哪个时间开始记时 默认为函数执行时间
       */
      timeRecording(type: string, timestamp?: number) {
        let second = 0
        if (timestamp) {
          const beginDate = new Date(timestamp)
          const endDate = newDate()
          const diff = endDate.getTime() - beginDate.getTime()
          if (diff > 0) {
            second = diff / 1000
          } else {
            second = 0
          }
        }
        phoneBarPeerTimeRef.value.timerTypeChange({ timeType: type, statusTime: second })
        phoneBarStatusTimeRef.value.timerTypeChange({ timeType: type, statusTime: second })
        phoneBarQuickStatusTimeRef.value.timerTypeChange({ timeType: type, statusTime: second })
      },
      changeOpenState() {
        state.setUnfoldState(!state.isOpenpanel)
      },
      setUnfoldState(data: boolean) {
        state.isOpenpanel = data
        localStorage.setItem('phoneUnfoldState', JSON.stringify(data))
      }
    })
    const interactive = reactive({
      setDialState(state: any) {
        state.showDial = state
      },
      toggleDialState() {
        state.showDial = !state.showDial
      }
    })
    // ----------------计算属性-----------------------
    // 接听按钮状态
    const acceptBtnState = computed(() => {
      return state.isVisibleBtn('answer')
    })

    watch(acceptBtnState, (acceptBtnState: boolean) => {
      // 自动接听
      if (acceptBtnState) {
        if (state.callConfig.autoAnswer) {
          const time = state.callConfig.autoAnswerTime ? Number(state.callConfig.autoAnswerTime) * 1000 : 0
          setTimeout(() => {
            state.accept()
          }, time)
        }
      }
    })

    const pushServe = computed(() => {
      return USERMODULE.pushServer
    })
    // 静止状态切换
    const disabledSwitch = computed(() => {
      return ['calling', 'called', 'ring'].includes(state.stateType)
    })

    watch(disabledSwitch, (currentState) => {
      // 通话中状态
      if (currentState) {
        // 振铃是否展开客户卡片
        // 通话中清空输入号码
        state.dialoutNumber = ''
        if (state.accountConfig.ringCard) {
          state.quickState = false
        } else {
          state.quickState = true
        }
      }
    })

    // 隐藏键盘和配置
    const hiddenOprate = computed(() => {
      return !['free', 'busy', 'disconnect'].includes(state.stateType) || state.errorObj.isError
    })

    // 呼入挂断
    const showHangupBtn = computed(() => {
      if (state.currentCallType === 'dialout') {
        return !state.accountConfig.forbidDialOutHangup
      } else if (state.currentCallType === 'incoming') {
        return !state.accountConfig.forbidDialInHangup
      } else {
        return true
      }
    })

    // ----------------监听方法-----------------------
    const keyboard = reactive({
      defaultKeyboardPlaceholder: '请输入外呼号码',
      showKeyboardPlaceholder: true
    })
    // ----------------调用方法-----------------------
    const getConfig = () => {
      getPersonInfo().then((res) => {
        // 配置回显
        if (res.success && res.data) {
          state.defaultConfig =
            {
              loginType: state.loginType || 'WEBRTC',
              mobile: res.data.mobile,
              sipNumber: res.data.agentCallConfig.sipNumber,
              autoAnswer: res.data.agentCallConfig.autoAnswer,
              autoAnswerTime: res.data.agentCallConfig.autoAnswerTime
            } || {}
          state.callConfig = deepClone(state.defaultConfig)
          state.loginTypeList = state.loginTypeList.filter((item: any) => {
            return res.data.agentCallConfig.loginType.includes(item.value)
          })
        }
      })
      fetchData({ accountId: USERMODULE.accountId || '' }).then((res) => {
        if (res.success) {
          state.accountConfig.forbidDialInHangup = res.data.forbidDialInHangup
          state.accountConfig.forbidDialOutHangup = res.data.forbidDialOutHangup
        }
      })
      getAgentConfig({}).then((res: any) => {
        if (res && res.success) {
          state.accountConfig.ringCard = res.data.frontCallConfig.ringCard
        }
      })
    }

    const changeType = () => {
      // 切换接听方式时清空其他方式的数据
      const obj = { ...state.defaultConfig, loginType: state.callConfig.loginType }
      state.callConfig = deepClone(obj)
    }

    const validFun = (val: any) => {
      if (!isNumber(val)) {
        state.callConfig.mobile = '' // 清空数据
        ElMessage.error('只能输入数字')
      }
    }

    const handleParams = (params: any, type: string) => {
      switch (type) {
        case 'PSTN':
          params.mobile = state.callConfig.mobile
          break
        case 'SIP':
          params.agentCallConfig.sipNumber = state.callConfig.sipNumber
          break
        case 'WEBRTC':
          params.agentCallConfig.autoAnswer = state.callConfig.autoAnswer
          if (state.callConfig.autoAnswer) {
            params.agentCallConfig.autoAnswerTime = Number(state.callConfig.autoAnswerTime)
          }
          break
      }
    }

    const updateLoginType = () => {
      const params = {
        agentCallConfig: {}
      }
      changeLoginType({
        accountId: USERMODULE.agent.accountId,
        agentNumber: USERMODULE.agent.agentNumber,
        loginType: state.callConfig.loginType
      }).then((res: any) => {
        if (res.success) {
          state.loginType = state.callConfig.loginType
          if (state.callConfig.loginType !== 'WEBRTC') {
            CALLSTATE.disconnect()
          } else {
            CALLSTATE.connect()
          }
          state.setBack()
          CALLSTATE.updateLoginType(state.callConfig.loginType)
          ElMessage.success('切换状态成功')
        }
      })
      handleParams(params, state.callConfig.loginType)
      updateCallConfig(params).then((res) => {
        if (res.success) {
          state.defaultConfig = state.callConfig
        }
      })
    }

    const getSipNumbers = () => {
      getSipNum({}).then((res) => {
        if (res.data) {
          state.sipNumberList = res.data || []
        }
      })
    }

    onMounted(() => {
      getSipNumbers()
      // getConfig()
    })

    return {
      ...toRefs(state),
      ...toRefs(keyboard),
      ...toRefs(interactive),
      disabledSwitch,
      hiddenOprate,
      phoneBarPeerTimeRef,
      phoneBarStatusTimeRef,
      phoneBarQuickStatusTimeRef,
      pushServe,
      CALLSTATE,
      updateLoginType,
      validFun,
      changeType,
      kzicon,
      showHangupBtn
    }
  }
})
</script>

<style lang="stylus">
.phoneMenu
  z-index 10001 !important
.offlineTip
  z-index 10001 !important
</style>
<style lang="stylus" scoped>
:deep(.hide-dropdown-item)
  display none
.call-status-box
  display flex
  align-items center
  margin-bottom 24px
  position relative
  .close
    position absolute
    right 0
    top 0
    width 26px
    height 26px
    background var(--mc-gray3-color)
    border-bottom-left-radius 13px
    border-top-right-radius 8px
    right -8px
    top -8px
    display flex
    align-items center
    justify-content center
    color rgba(0, 0, 0, 0.38)
  .status-box
    height: 20px
    font-size 14px
    display flex
    justify-content: center
    align-items: center
    color white
    padding 0 12px 0
    border-radius 10px
    background-color var(--mc-call-color-connect)
  .ring
    background-color var(--mc-call-color-ringing)
  .calling
    background-color var(--mc-call-color-connect)
  .status-num-info
    color rgba(0, 0, 0, 0.6)
    display flex
    align-items center
    font-size 14px
    margin-left 8px
.call-status-box,.customer-info
  padding 0 8px
.customer-info
  display flex
  flex-direction column
  .customer-item
    display flex
    flex-direction row
    justify-content: space-between
    align-items center
    margin-bottom 8px
    .customer-name
      font-size 20px
      color rgba(0, 0, 0, 0.88)
      max-width 12em
      text-overflow ellipsis
      white-space nowrap
      display inline-block
      overflow hidden
    .region
      font-size 14px
      color rgba(0, 0, 0, 0.6)
    .time
      font-size 14px
      color rgba(0, 0, 0, 0.6)
    .tag
      background-color #EEF0F2
      color #252C32
      height 18px
      font-size 12px
      display flex
      align-items center
      padding 0 6px 0
      border-radius 9px
.link-hangup
  background white
  box-sizing border-box
  .btn
    margin 0 0 8px 0
</style>

<style lang="stylus" scoped>
.input-with-select
  width 100px
  .el-input-group__append
    padding 0 8px
    background #fff
    color rgba(0, 0, 0, 0.88)
:deep(.status-name-text)
  display flex
  align-items center
  .status
    width 6px
    height 6px
    border-radius 50%
    margin-right 8px
    background-color var(--mc-call-color-missed)
  .idle
    background-color var(--mc-call-color-connect)
.width-full
  width 100%
.oprate-transfer
  background white
  border-radius 8px
  box-shadow 0px 0px 8px 0px rgba(0, 0, 0, 0.05)
  padding 8px
  box-sizing border-box
  margin-bottom 8px
.phone-bar
  font-size 14px
  width 320px
  z-index 10000
  top 0px
  background-color white
  left 200px
  background rgba(255, 255, 255, 0.9)
  box-shadow 0px 0px 16px rgba(0, 0, 0, 0.1)
  // backdrop-filter: blur(32px);
  border-radius 8px
  padding 8px 8px 0px
  // :before
  //   content: ''
  //   width: 100%
  //   height: 100%
  //   background rgba(255, 255, 255, 0.8)
  //   position: absolute
  //   left: 0;  //giving minus -25px left position
  //   right: 0;
  //   top: 0;   //giving minus -25px top position
  //   bottom: 0;
  //   // box-shadow: inset 0 0 0 200px rgba(255,255,255,0.3);
  //   // // filter: blur(2px);
       // z-index -1
  &:hover
    .setting
      display block
    .dial
      display block
      margin-bottom 8px
  .left-switch
    position absolute
    width 20px
    height 64px
    background rgba(255, 255, 255, 0.9)
    top 20px
    left -20px
    // border-top-left-radius: 6px;
    // border-bottom-left-radius: 6px;
    display flex
    justify-content center
    align-items center
    color rgba(0, 0, 0, 0.3)
    cursor pointer
  .left-switch::before
    content ''
    width 20px
    position absolute
    height 16px
    top -16px
    background red
  .left-switch::after
    content ''
    width 20px
    position absolute
    height 16px
    bottom -16px
    background red
.scale0 .link-hangup
  animation scale0 0.3s 1 forwards
  animation-delay 0s
  background red
.scale0 .link-oprate
  height 0
  overflow hidden
.scale0 .peerStatus
  height 0
  animation scale1 0.1s 1 forwards
  animation-delay 0.3s
  overflow hidden
@keyframes scale0
  from
    transform scale(0)
  to
    transform scale(1)
@keyframes scale1
  from
    height 0
  to
    height auto
.peerStatus
  cursor move
  background var(--mc-main-color)
  display flex
  align-items center
  justify-content space-between
  border-radius 8px
  height 40px
  padding 0 16px
  margin-bottom 8px
  color #fff
  .dialState-box
    display flex
    align-items center
    .icon
      font-size 14px
      margin-left 8px
  .status-name
    color #fff
    .MC_icon-fangxiang-xia-mian-xiao
      margin-left 4px
  .MC_iconfont
    font-size 12px
  .login-type
    display flex
    color #000
    align-self flex-start
    .left
      width 8px
      height 8px
      background #fff
      position relative
      // border-top-right-radius: 8px;
      &:before
        content ''
        display block
        position absolute
        width 8px
        height 8px
        border-top-right-radius 8px
    .middle
      padding 4px 8px
      font-size 12px
      background-color #fff
      border-bottom-left-radius 4px
      border-bottom-right-radius 4px
      box-sizing unset
      .iconProperty1xia
        display inline-block
      &:hover
        .iconProperty1xia
          display inline-block
    .right
      width 8px
      height 8px
      background #fff
      &:before
        content ''
        display block
        position absolute
        width 8px
        height 8px
        border-top-left-radius 8px
.free
  background-color var(--el-color-primary-dark)
  .login-type
    color var(--el-color-primary-dark)
  .left, .right
    background-color var(--el-color-primary-dark)
  .left:before, .right:before
    background-color var(--el-color-primary-dark)
.busy
  background-color var(--mc-call-color-missed)
  .login-type
    color var(--mc-call-color-missed)
  .left, .right
    background-color var(--mc-call-color-missed)
  .left:before, .right:before
    background-color var(--mc-call-color-missed)
.disconnect
  background-color #cccccc
  .login-type
    color #cccccc
  .left, .right
    background-color #cccccc
  .left:before, .right:before
    background-color #cccccc
.calling, .called, .ring
  background-color rgba(0, 0, 0, 0)
  color rgba(0, 0, 0, 0.8)
  height 20px
  padding 0 8px
  .status-name
    color rgba(0, 0, 0, 0.8)
.oprate-wrap
  display flex
  flex-wrap wrap
.btn
  border-radius 8px
  padding 10px 8px
  margin 0 4px 8px
  line-height 20px
  text-align center
  flex-grow 1
.btn-middle:hover
  background var(--mc-gray3-color)
.btn-middle
  margin 0 5px 8px
  border-radius 8px
  width 96px
  box-sizing border-box
  padding 8px 8px
  background-color #fff
  display flex
  flex-direction column
  font-size 12px
  max-width 96px
  box-sizing border-box
  box-shadow 0px 0px 8px rgba(0, 0, 0, 0.05)
  color rgba(0, 0, 0, 0.88)
  .MC_iconfont
    font-size 16px
    line-height 16px
    margin-bottom 2px
    font-weight 400
  .text
    line-height 18px
    font-size 12px
    font-weight 400
.bak-btn
  width auto
  max-width 100%
.error-back
  background-color var(--mc-call-color-missed)
  color #fff
.success-back
  background-color var(--mc-secondary1-color)
  color #fff
.light-back
  background-color rgba(0, 0, 0, 0.03)
.dial
  .dial-input
    display flex
    align-items center
    justify-content center
    .back
      width 32px
      padding-right 24px
      max-height 32px
  :deep(.el-input__wrapper)
    box-shadow none
  :deep(.el-input__inner)
    border none
    font-size: 14px;
    text-align: center;
    box-shadow none
  margin-bottom 8px
  transition 'height, background-image' 0.5s
  position relative
  background-color #fff
  border-radius 8px
  overflow hidden
  box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.05)
  .input
    margin 16px 0 8px
  .dial-box
    padding 0 52px
    display flex
    flex-wrap wrap
    .MC_icon-wenbenqingdan-xian
      font-size 20px
    .num
      width 40px
      height 40px
      line-height 40px
      text-align center
      border-radius 50%
      margin-bottom 16px
      display flex
      align-items center
      justify-content center
      color rgba(0, 0, 0, 0.8)
      &:nth-child(3n + 2)
        margin 0 40px 16px
      &.back
        border-radius 0
        width 32px
      &.iconjianpan
        font-size 24px
    .success-back
      background-color var(--mc-secondary1-color)
      color #fff
    .star
      font-size 24px
      display flex
      align-items center
.setting
  display block
  transition height 0.5s
  border-radius 8px
  padding 8px
  margin-bottom 8px
  background-color #fff
  box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.05)
  .label
    line-height 20px
    margin-bottom 8px
  .type
    margin-bottom 8px
  .footer
    padding-top 8px
    text-align right
.error
  background-image red
  background-size 100%
  background-color #fff
  padding 24px 16px
  margin-bottom 8px
  border-radius 8px
  background-repeat no-repeat
.quick-operation-box
  width 100%
  height 40px
  display flex
  margin-bottom 8px
  .quick-state
    height 100%
    border-radius 8px
    flex 1
    display flex
    align-items center
    justify-content space-between
    background-color var(--mc-call-color-connect)
    color #fff
    padding-left 16px
    box-sizing border-box
    .MC_iconfont
      font-size 16px
      margin 0 8px 0
  .ring
    background-color var(--mc-call-color-ringing)
  .calling
    background-color var(--mc-call-color-connect)
  .quick-btn
    display flex
    padding-left 8px
    .accept
      background-color var(--mc-call-color-connect)
      margin-left 8px
    .hangup
      background-color var(--mc-call-color-missed)
    .btn-item
      width 40px
      height 40px
      height #fff
      border-radius 8px
      color white
      font-size 16px
      display flex
      align-items center
      justify-content center
@keyframes btn-size
  from
    transform scale(1)
  to
    transform scale(1.1)
.phone-bar-quick .icon .answer
  width 32px
  height 32px
  border-radius 50%
  background var(--mc-success-color)
.phone-bar-quick .icon .hangup
  width 32px
  height 32px
  border-radius 50%
  background var(--mc-call-color-missed)
.phone-bar-quick .circle
  position absolute
  border-top-left-radius 24px
  border-bottom-left-radius 24px
  opacity 0
.ripple
  max-width 300px
  background-image linear-gradient(to right, var(--mc-success-color), transparent)
  transition max-width 0.5s
/* 波纹效果 */
.ripple .circle
  // top: -2px;
  // left: -2px;
  width calc(100% + 2px)
  /* 减去边框的大小 */
  height calc(100% + 2px)
  /* 减去边框的大小 */
  border 2px solid #fff
  border-right 0
  border-color var(--mc-success-color)
.ripple .circle:first-child
  animation circle-opacity 2s infinite
.ripple .circle:nth-child(2)
  animation circle-opacity 2s infinite
  animation-delay 0.3s
.ripple .circle:nth-child(3)
  animation circle-opacity 2s infinite
  animation-delay 0.6s
.name-ellipsis
  max-width 6em
  text-overflow ellipsis
  white-space nowrap
  display inline-block
  overflow hidden
@keyframes circle-opacity
  from
    opacity 0.8
    transform scale(1)
  to
    opacity 0
    transform scale(1.5, 1.5)
    border-width 0
    /* transform: translateX(-25px) */
.flex-a
  display inline-flex
</style>
